<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css"
          href="../css/jquery/jquery-ui-1.8.23.custom.css" media="screen"/>
    <link rel="stylesheet" type="text/css"
          href="../css/jqgrid/ui.jqgrid.css" media="screen"/>
    <script type="text/javascript" src="../js/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript"
            src="../js/jquery/jquery-ui-1.8.23.custom.min.js"></script>
    <script type="text/javascript" src="../js/jqgrid/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="../js/jqgrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../js/form/jquery.mrd.form.js"></script>
</head>
<script type="text/javascript">
    $(document)
            .ready(
                    function () {
                        $("#form")
                                .mrdForm(
                                        {
                                            title: "查询表单",// 表单标题
                                            numCount: "3",
                                            width: '100%',// 表格宽度
                                            lwidth: 60,// label的默认宽度
                                            cwidth: 200,// 输入框的默认宽度
                                            columns: [
                                                {
                                                    name: "name",// 输入框id/name
                                                    label: "名称",// label名称
                                                    type: "textarea",// 输入框类型(text,textarea,label,dropdown,date)
                                                    value: "测试名称"// 默认值
                                                },
                                                {
                                                    name: "date",
                                                    label: "时间",
                                                    type: "date",
                                                    value: "2012-05-10"
                                                },
                                                {
                                                    name: "name1",
                                                    label: "名称1",
                                                    value: "BASIC-value",
                                                    type: "dropdown",
                                                    data: [
                                                        ["label1",
                                                            "value1"],
                                                        ["label2",
                                                            "value2"],
                                                        ["label3",
                                                            "value3"]],
                                                    dropdownType: "ajax",
                                                    url: "test-dropdown",
                                                    dataType: "json",
                                                    keyWordName: "k",
                                                    method: "post",
                                                    minLength: 2,
                                                    success: function (data) {
                                                        var ajaxData = new Array();
                                                        $
                                                                .each(
                                                                        data.dropdown,
                                                                        function (i,
                                                                                  n) {
                                                                            ajaxData
                                                                                    .push([
                                                                                        i,
                                                                                        n]);
                                                                        });
                                                        return ajaxData;
                                                    },
                                                    dropdownValue: "BASIC"
                                                }, {
                                                    name: "zip1",
                                                    label: "邮编1"
                                                }, {
                                                    name: "zip2",
                                                    label: "邮编2"
                                                }, {
                                                    name: "zip3",
                                                    label: "邮编2",
                                                    colspan: 2
                                                }, {
                                                    name: "zip3",
                                                    label: "邮编3",
                                                    colspan: 2
                                                }, {
                                                    name: "zip4",
                                                    label: "邮编4"
                                                }, {
                                                    name: "zip5",
                                                    label: "邮编5"
                                                }, {
                                                    name: "zip6",
                                                    label: "邮编6",
                                                    colspan: 2
                                                }, {
                                                    name: "zip7",
                                                    label: "邮编7"
                                                }],
                                            buttons: {
                                                resetEvent: function () {
                                                    $("#form").mrdForm("show",
                                                            "#query");
                                                },
                                                custom: [{
                                                    value: "审核",
                                                    'disabled': false,
                                                    click: function () {
                                                        $("#form").mrdForm(
                                                                "hide",
                                                                "#query");
                                                    }
                                                }]
                                            },
                                            grid: {
                                                id: "table",
                                                datatype: "local",
                                                autowidth: true,
                                                height: 250,
                                                colNames: ['Inv No', 'Date',
                                                    'Client', 'Amount',
                                                    'Tax', 'Total', 'Notes'],
                                                colModel: [{
                                                    name: 'id',
                                                    index: 'id',
                                                    width: 60,
                                                    sorttype: "int"
                                                }, {
                                                    name: 'invdate',
                                                    index: 'invdate',
                                                    width: 90,
                                                    sorttype: "date"
                                                }, {
                                                    name: 'name',
                                                    index: 'name',
                                                    width: 100
                                                }, {
                                                    name: 'amount',
                                                    index: 'amount',
                                                    width: 80,
                                                    align: "right",
                                                    sorttype: "float"
                                                }, {
                                                    name: 'tax',
                                                    index: 'tax',
                                                    width: 80,
                                                    align: "right",
                                                    sorttype: "float"
                                                }, {
                                                    name: 'total',
                                                    index: 'total',
                                                    width: 80,
                                                    align: "right",
                                                    sorttype: "float"
                                                }, {
                                                    name: 'note',
                                                    index: 'note',
                                                    width: 150,
                                                    sortable: false
                                                }],
                                                caption: "测试数据"
                                            }
                                        });
                        // 						jQuery("#table").jqGrid({
                        // 							datatype: "local",
                        // 							autowidth:true,
                        // 							height: 250,
                        // 						   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                        // 						   	colModel:[
                        // 						   		{name:'id',index:'id', width:60, sorttype:"int"},
                        // 						   		{name:'invdate',index:'invdate', width:90, sorttype:"date"},
                        // 						   		{name:'name',index:'name', width:100},
                        // 						   		{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                        // 						   		{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                        // 						   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                        // 						   		{name:'note',index:'note', width:150, sortable:false}
                        // 						   	],
                        // 						   	multiselect: true,
                        // 						   	caption: "测试数据"
                        // 						});
                        var mydata = [{
                            id: "1",
                            invdate: "2007-10-01",
                            name: "test",
                            note: "note",
                            amount: "200.00",
                            tax: "10.00",
                            total: "210.00"
                        }, {
                            id: "2",
                            invdate: "2007-10-02",
                            name: "test2",
                            note: "note2",
                            amount: "300.00",
                            tax: "20.00",
                            total: "320.00"
                        }, {
                            id: "3",
                            invdate: "2007-09-01",
                            name: "test3",
                            note: "note3",
                            amount: "400.00",
                            tax: "30.00",
                            total: "430.00"
                        }, {
                            id: "4",
                            invdate: "2007-10-04",
                            name: "test",
                            note: "note",
                            amount: "200.00",
                            tax: "10.00",
                            total: "210.00"
                        }, {
                            id: "5",
                            invdate: "2007-10-05",
                            name: "test2",
                            note: "note2",
                            amount: "300.00",
                            tax: "20.00",
                            total: "320.00"
                        }, {
                            id: "6",
                            invdate: "2007-09-06",
                            name: "test3",
                            note: "note3",
                            amount: "400.00",
                            tax: "30.00",
                            total: "430.00"
                        }, {
                            id: "7",
                            invdate: "2007-10-04",
                            name: "test",
                            note: "note",
                            amount: "200.00",
                            tax: "10.00",
                            total: "210.00"
                        }, {
                            id: "8",
                            invdate: "2007-10-03",
                            name: "test2",
                            note: "note2",
                            amount: "300.00",
                            tax: "20.00",
                            total: "320.00"
                        }, {
                            id: "9",
                            invdate: "2007-09-01",
                            name: "test3",
                            note: "note3",
                            amount: "400.00",
                            tax: "30.00",
                            total: "430.00"
                        }];
                        for (var i = 0; i <= mydata.length; i++) {
                            jQuery("#table").jqGrid('addRowData', i + 1,
                                    mydata[i]);
                        }
                        $(window).resize(
                                function () {
                                    $("#table").setGridWidth(
                                            $(window).width()
                                            - $("#table").getGridParam(
                                                    'scrollOffset'));
                                });
                    });
</script>

<body>
<div id="form"></div>
<table id="table"></table>
</body>
</html>
